<template>
  <div style="position:relative">
    <div style="position:absolute;right:10%;top:10px;z-index:100">
      <slot :opt="options"/>
    </div>
    <div ref="bar" style="width:100%;height:500px;" v-loading="loading"></div>
  </div>
</template>

<script>
import { getChartData } from "@api/chart";

export default {
  data() {
    return {
      loading: true,
      // options写死的
      options: undefined
    };
  },
  props: {
    api: {
      type: String,
      default: undefined
    }
    // search: {
    //   type: Object,
    //   default: {}
    // }
  },
  watch: {
    // 查询条件
    // search: {
    //   handler(nv) {
    //     this.fetchData(this.api, nv);
    //   }
    // }
  },
  //
  methods: {
    handleChangeValAction(url, obj) {
      this.apiFunc(url, obj);
    },
    // fetchData(url, obj = {}) {
    //   this.$axios.post(url, obj).then(res => {
    //     let myChart = this.$echarts.init(this.$refs.bar);
    //     let resData = {};
    //     // 承接后端返回的数据：return直接结束函数
    //     if (res.data.msgCode < 0) {
    //       this.$message("请求失败");
    //       this.loading = false;
    //       return;
    //     }
    //     [resData.title, resData.xData, resData.data] = [
    //       res.data.title,
    //       res.data.xData,
    //       res.data.data
    //     ];
    //     // 给图表相关配套组件的数据《
    //     // options写死的
    //     // 这里可以改变传的值
    //     // 使用assign可以方便自己动态加一些属性和方法
    //     this.options = Object.assign({}, res);
    //     console.log(this.options, "数据源");
    //     // 给图表相关配套组件的数据》

    //     // 承接后端返回的数据
    //     // resData.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    //     // resData.data = [
    //     //   {
    //     //     name: "直接访问",
    //     //     type: "bar",
    //     //     barWidth: "60%",
    //     //     data: [10, 52, 200, 334, 390, 330, 220]
    //     //   }
    //     // ];
    //     // resData.title = "普通柱状图";
    //     // 指定图表的配置项和数据
    //     let option = {
    //       title: {
    //         text: resData.title,
    //         x: "2%",
    //         textStyle: {
    //           color: "rgba(96, 98, 102, 1)",
    //           fontSize: "20"
    //         }
    //       },
    //       // grid: {
    //       //   left: "20%"
    //       // },
    //       // legend: {
    //       //   type: "scroll",
    //       //   orient: "vertical",
    //       //   top: "10%",
    //       //   left: "2%",
    //       //   bottom: "10%",
    //       //   data: resData.legendData
    //       // },
    //       color: ["#3398DB"],
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           // 坐标轴指示器，坐标轴触发有效
    //           type: "line" // 默认为直线，可选为：'line' | 'shadow'
    //         }
    //       },
    //       xAxis: [
    //         {
    //           type: "category",
    //           data: resData.xData,
    //           // 提示线颜色
    //           axisPointer: {
    //             lineStyle: {
    //               color: "#4670dc"
    //             }
    //           },
    //           axisLine: {
    //             lineStyle: {
    //               color: "#008ACD"
    //             }
    //           },
    //           axisTick: {
    //             lineStyle: {
    //               color: "008ACD"
    //             }
    //           },
    //           axisLabel: {
    //             color: "#008ACD"
    //           }
    //         }
    //       ],
    //       yAxis: [
    //         {
    //           type: "value",
    //           axisLine: {
    //             lineStyle: {
    //               color: "#008ACD"
    //             }
    //           },
    //           axisTick: {
    //             lineStyle: {
    //               color: "#008ACD"
    //             }
    //           },
    //           axisLabel: {
    //             color: "#008ACD"
    //           },
    //           splitLine: {
    //             lineStyle: {
    //               color: ["#eee"]
    //             }
    //           },
    //           splitArea: {
    //             show: true,
    //             areaStyle: {
    //               color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.1)"]
    //             }
    //           }
    //         }
    //       ],
    //       series: resData.data
    //     };
    //     // 使用刚指定的配置项和数据显示图表。
    //     myChart.setOption(option);
    //     // 浏览器窗口自适应
    //     window.onresize = function() {
    //       myChart.resize();
    //     };
    //     this.loading = false;
    //   });
    // },
    apiFunc(url, obj = {}) {
      this.$axios.get(url, obj).then(res => {
        let myChart = this.$echarts.init(this.$refs.bar);
        let resData = {};
        // 承接后端返回的数据：return直接结束函数
        if (res.data.msgCode < 0) {
          this.$message("请求失败");
          this.loading = false;
          return;
        }
        [resData.title, resData.xData, resData.data] = [
          res.data.title,
          res.data.xData,
          res.data.data
        ];
        // 给图表相关配套组件的数据《
        // options写死的
        // 这里可以改变传的值
        // 使用assign可以方便自己动态加一些属性和方法
        this.options = Object.assign({}, res);
        console.log(this.options, "数据源");
        // 给图表相关配套组件的数据》

        // 承接后端返回的数据
        // resData.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
        // resData.data = [
        //   {
        //     name: "直接访问",
        //     type: "bar",
        //     barWidth: "60%",
        //     data: [10, 52, 200, 334, 390, 330, 220]
        //   }
        // ];
        // resData.title = "普通柱状图";
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: resData.title,
            x: "2%",
            textStyle: {
              color: "rgba(96, 98, 102, 1)",
              fontSize: "20"
            }
          },
          // grid: {
          //   left: "20%"
          // },
          // legend: {
          //   type: "scroll",
          //   orient: "vertical",
          //   top: "10%",
          //   left: "2%",
          //   bottom: "10%",
          //   data: resData.legendData
          // },
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: [
            {
              type: "category",
              data: resData.xData,
              // 提示线颜色
              axisPointer: {
                lineStyle: {
                  color: "#4670dc"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#008ACD"
                }
              },
              axisTick: {
                lineStyle: {
                  color: "008ACD"
                }
              },
              axisLabel: {
                color: "#008ACD"
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#008ACD"
                }
              },
              axisTick: {
                lineStyle: {
                  color: "#008ACD"
                }
              },
              axisLabel: {
                color: "#008ACD"
              },
              splitLine: {
                lineStyle: {
                  color: ["#eee"]
                }
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.1)"]
                }
              }
            }
          ],
          series: resData.data
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 浏览器窗口自适应
        window.onresize = function() {
          myChart.resize();
        };
        this.loading = false;
      });
    }
  },
  mounted() {
    this.loading = true;
    // this.$nextTick确保父组件的值有先传过来
    this.$nextTick(() => {
      this.apiFunc(this.api, {});
    });
  }
};
</script>

<style>
</style>
